<template>
  <view>
    <view class="top-view">
      <uni-nav-bar
        backgroundColor="transparent"
        :shadow="false"
        :border="false"
        :statusBar="true"
        color="white"></uni-nav-bar>
    </view>
    <view class="container">
      <view class="info-row" @click="navToUserInfo">
        <image :src="info.pictureName" class="avatar" />
        <view class="name-and-phone">
          <view class="name">{{ info.nurseName || "" }}</view>
          <view class="phone">
            {{ info.tel || "" }}{{ info.tel && info.hospitalName ? "｜" : ""
            }}{{ info.hospitalName || "" }}
          </view>
        </view>
        <uni-icons type="right" color="rgba(35,35,35,0.6)" />
      </view>

      <view class="statistics-card">
        <view class="item">
          <view class="num">￥{{ info.balance }}</view>
          <view class="name">总收益</view>
        </view>
        <view class="item">
          <view class="num">{{ info.orderCount }}个</view>
          <view class="name">服务单数</view>
        </view>
        <!-- 	<view class="item">
					<view class="num">5000个</view>
					<view class="name">评价数</view>
				</view> -->
      </view>

      <view class="card-view">
        <view class="row" @click="navToMineWallet">
          <image src="../../static/mine_wallet.png"></image>
          <view class="title">钱包</view>
          <view class="right">
            <view class="name">余额</view>
            <view class="num">{{ info.balance }}</view>
          </view>
          <uni-icons type="right" color="rgba(35,35,35,0.6)" />
        </view>
        <view class="row" @click="navToBillingDetail">
          <image src="../../static/mine_bill.png"></image>
          <view class="title">账单明细</view>
          <uni-icons type="right" color="rgba(35,35,35,0.6)" />
        </view>
        <!-- <view class="row" @click="navToEvaluateMe">
					<image src="../../static/mine_evaluate.png"></image>
					<view class="title">评价我的</view>
					<uni-icons type="right" color="rgba(35,35,35,0.6)" />
				</view>
				<view class="row" @click="navToMyEvaluate">
					<image src="../../static/mine_evaluateme.png"></image>
					<view class="title">我评价的</view>
					<uni-icons type="right" color="rgba(35,35,35,0.6)" />
				</view> -->
        <view class="row" @click="navToSecuritySettings">
          <image src="../../static/mine_evaluateme.png"></image>
          <view class="title">安全设置</view>
          <uni-icons type="right" color="rgba(35,35,35,0.6)" />
        </view>
        <view class="row" @click="navTobankcard">
          <image src="../../static/mine_bankcard.png"></image>
          <view class="title">我的银行卡</view>
          <uni-icons type="right" color="rgba(35,35,35,0.6)" />
        </view>
      </view>

      <view class="exit-btn" @click="logout">退出账号</view>
    </view>
  </view>
</template>

<script>
import * as nurseInfo from "../../common/api/nurseInfo.js";
export default {
  data() {
    return {
      info: {},
      revenue: "",
      service: "",
      evaluate: "",
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    getData() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      console.log("user_info dataJson", dataJson);
      const data = JSON.parse(dataJson) || {};
      const param = {
        uid: data.nurseUid,
      };
      nurseInfo
        .queryById(param)
        .then((result) => {
          this.info = result.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToMineWallet() {
      uni.navigateTo({
        url: "/pages/myWallet/myWallet?uid=" + this.info.uid,
      });
    },
    navToBillingDetail() {
      uni.navigateTo({
        url: "/pages/billingDetail/billingDetail?uid=" + this.info.uid,
      });
    },
    navToEvaluateMe() {
      uni.navigateTo({
        url: "/pages/evaluateMe/evaluateMe",
      });
    },
    navToMyEvaluate() {
      uni.navigateTo({
        url: "/pages/myEvaluate/myEvaluate",
      });
    },
    logout() {
      uni.showModal({
        title: "确认退出？",
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync("user_info");
            uni.reLaunch({
              url: "/pages/login/login",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    navToUserInfo() {
      uni.navigateTo({
        url:
          "/pages/personalInformation/personalInformation?uid=" + this.info.uid,
      });
    },
    navToSecuritySettings() {
      uni.navigateTo({
        url: "/pages/securitySettings/securitySettings",
      });
    },
    navTobankcard() {
      uni.navigateTo({
        url: "/pages/navTobankcard/navTobankcard",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-view {
  height: 448rpx;
  background: linear-gradient(to right, #d3ecf2, #f6f8f8);
}

.container {
  margin-top: -280rpx;
  display: flex;
  flex-direction: column;

  .info-row {
    margin-left: 40rpx;
    margin-right: 40rpx;
    display: flex;
    align-items: center;

    .avatar {
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
    }

    .name-and-phone {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
      flex: 1;

      .name {
        color: #232323;
        font-size: 38rpx;
        font-weight: bold;
      }

      .phone {
        color: rgba(35, 35, 35, 0.6);
        font-size: 26rpx;
        margin-top: 20rpx;
      }
    }
  }
}

.card-view {
  margin-left: 40rpx;
  margin-right: 40rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
  border-radius: 24rpx;

  .row {
    display: flex;
    align-items: center;
    height: 120rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
    }

    .title {
      flex: 1;
      margin-left: 20rpx;
      color: #232323;
      font-size: 30rpx;
    }

    .right {
      display: flex;
      align-items: center;

      .name {
        color: rgba(35, 35, 35, 0.6);
        font-size: 24rpx;
      }

      .num {
        color: #232323;
        font-size: 34rpx;
        font-weight: bold;
        margin-left: 6rpx;
        margin-right: 12rpx;
      }
    }
  }
}

.exit-btn {
  margin-left: 40rpx;
  margin-right: 40rpx;
  height: 90rpx;
  background: white;
  border-radius: 20rpx;
  margin-top: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35, 35, 35, 0.7);
  font-size: 28rpx;
  margin-bottom: 80rpx;
}

.statistics-card {
  margin-left: 40rpx;
  margin-right: 40rpx;
  background: white;
  box-sizing: border-box;
  margin-top: 80rpx;
  border-radius: 24rpx;
  display: flex;
  height: 160rpx;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .num {
      font-size: 36rpx;
      color: #232323;
      font-weight: bold;
    }

    .name {
      color: rgba(35, 35, 35, 0.5);
      font-size: 26rpx;
    }
  }
}
</style>
